<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>miniWeChat</title>
	<link rel="shortcut icon" type="image/x-icon" href="../../favicon.ico">
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
			font-family: '微软雅黑'
		}

		#container {
			width: 450px;
			height: 600px;
			background: #eee;
			margin: 10px auto 0;
			position: relative;
			box-shadow: 0px 0px 16px #999;
			overflow:hidden;
		}

		.header {
			background: #000;
			height: 34px;
			color: #fff;
			height: 40px;
			line-height: 40px;
			font-size: 20px;
			padding: 0 10px;
		}

		.footer {
			width: 430px;
			height: 40px;
			background: #999;
			position: absolute;
			bottom: 0;
			padding: 10px;
		}

		.footer input {
			width: 300px;
			height: 38px;
			outline: none;
			font-size: 16px;
			text-indent: 10px;
			position: absolute;
			border-radius: 6px;
			right: 80px;
		}

		.footer span {
			display: inline-block;
			width: 62px;
			height: 38px;
			background: #ccc;
			font-weight: 900;
			line-height: 38px;
			cursor: pointer;
			text-align: center;
			position: absolute;
			right: 10px;
			top: 14px;
			border-radius: 6px;
		}

		.footer span:hover {
			color: #777;
			background: #ddd;
		}

		.icon {
			display: inline-block;
			background: red;
			width: 50px;
			height: 50px;
			border-radius: 30px;
			position: absolute;
			bottom: 3px;
			left: 10px;
			cursor: pointer;
			overflow: hidden;
		}

		img {
			width: 60px;
			height: 60px;
			border-radius: 8px;
		}

		.content {
			font-size: 20px;
			width: 435px;
			height: 490px;
			overflow: auto;
			padding: 5px;
			overflow-x:hidden;
			overflow-y:scroll;
		}
		/* 隐藏滚动条 */
		/* chrome */
		.content::-webkit-scrollbar {
			width: 0 !important;
		}
		/* IE */
		.content {
			-ms-overflow-style: none;
		}
		/* 火狐 */
		.content {
			overflow: -moz-scrollbars-none;
		}
		.content li {
			margin-top: 10px;
			padding-left: 10px;
			width: 412px;
			display: block;
			clear: both;
			overflow: hidden;
		}

		.content li img {
			float: left;
		}

		.content li span {
			background: #7cfc00;
			padding: 10px;
			border-radius: 10px;
			float: left;
			margin: 6px 10px 0 10px;
			max-width: 310px;
			border: 1px solid #ccc;
			box-shadow: 0 0 3px #ccc;
		}

		.content li img.imgleft {
			float: left;
		}

		.content li img.imgright {
			float: right;
		}

		.content li span.spanleft {
			float: left;
			background: #fff;
		}

		.content li span.spanright {
			float: right;
			background: #7cfc00;
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="header"> <span style="float: right;">20:30</span> <span style="float: left;">小泽老师</span> </div>

		<ul class="content"></ul>

		<div class="footer">
			<div class="icon"> <img src="img/1.png" alt="" id="icon"> </div>
			<input id="text" type="text" placeholder="说点什么吧..."> <span id="btn">发送</span> </div>
	</div>
	<script>
	  //切换头像
	  var img1 = document.getElementById('icon');
	  var tag = 0;
	  var arr = ['img/1.png','img/2.png'];
	  img1.onclick = function  () {
		  if(tag == 0){
		  	img1.src = arr[1];
		  	tag = 1;
		  }else{
		  	img1.src = arr[0];
		  	tag = 0;
		  }
	  }
	  //为发送添加点击事件
	  var btn = document.getElementById('btn');
	  var text = document.getElementById('text');
	  var content = document.getElementsByClassName('content')[0];
	  var num = 0;
	  var img2 = content.getElementsByTagName('img');
	  var span = content.getElementsByTagName('span');
	  btn.onclick = function  () {
	  		//判断内容是否为空
	  		if(text.value == ''){
	  			alert('内容不能为空，请输入内容。')
	  		}else{
	  			content.innerHTML += "<li><img src='"+arr[tag]+"'/><span>"+text.value+"</span></li>"
	  		}
	  //为左浮动右浮动做判断
	  if(tag == 0){
	  		img2[num].className = 'imgleft';
	  		span[num].className = 'spanleft';
	  }else{
	  		img2[num].className = 'imgright';
	  		span[num].className = 'spanright';
	  }
	  num++;
	  text.value = '';
	  content.scrollTop = content.scrollHeight;
		}
	</script>
</body>
</html>